<template>
  <view class="wrap">
    <view class="status"></view>
    <view class="list nomt">
      <uv-cell-group>
        <uv-cell title="申请成为正式社群" :value='status[body.examine_status]' center isLink :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF' @click="tapExamine"></uv-cell>
      </uv-cell-group>
    </view>
    <view class="list">
      <uv-cell-group>
        <uv-cell title="付费周期" :value='payTime[body.pay_expiration]' url='' center isLink :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF' @click="openPay"></uv-cell>
        <uv-cell title="入群费用" :value="`${body.coin}投研币`" url='/pages/group/setting/coin' center isLink :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF'></uv-cell>
        <uv-cell title="提前15天续费折扣" :value="`${Number(body.discount_ratio) * 10}折`" url='/pages/group/setting/discount' center isLink :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF'></uv-cell>
      </uv-cell-group>
    </view>
    <view class="list">
      <uv-cell-group>
        <uv-cell title="成员加入自动回复" url='/pages/group/setting/reply' center isLink :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF'></uv-cell>
      </uv-cell-group>
    </view>
    <view class="list">
      <uv-cell-group>
        <uv-cell title="发表主题权限" :value='themeList[body.theme_auth]' url='' center isLink :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF' @click="openTheme"></uv-cell>
      </uv-cell-group>
    </view>
    <view class="list">
      <uv-cell-group>
        <uv-cell title="加入社群免审" url='' center :isLink='false' :border="false" titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF'>
          <template v-slot:value>
            <uv-switch v-model="body.is_exempt" activeColor="#E43222" :activeValue='1' :inactiveValue='0' asyncChange @change="asyncChange"></uv-switch>
          </template>
        </uv-cell>
      </uv-cell-group>
    </view>
    
    <uv-picker ref="payPicker" :columns="payColumns" :defaultIndex='[body.pay_expiration - 1]' keyName="label" confirmColor='#E43222' @confirm="payConfirm"></uv-picker>
    <uv-picker ref="themePicker" :columns="themeColumns" :defaultIndex='[body.theme_auth - 1]' keyName="label" confirmColor='#E43222' @confirm="themeConfirm"></uv-picker>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { editGroup, getGroup } from '@/common';
import { useOrder } from '@/store';

const payPicker = ref(null);
const themePicker = ref(null);

const status = { 0: "未提交", 1: "待审核", 2: "审核通过", 3: "审核拒绝" };
const payTime = { 1: '月度', 2: '季度', 3: '半年度', 4: '年度' };
const payColumns = [
  [
    {label: '月度',id: 1},
    {label: '季度',id: 2},
    {label: '半年度',id: 3},
    {label: '年度',id: 4}
  ]
]
const themeList = { 1: '所有人', 2: '群主与合伙人', 3: '核心成员' };
const themeColumns = [
  [
    {label: '所有人',id: 1},
    {label: '群主与合伙人',id: 2},
    {label: '核心成员',id: 3}
  ]
]

const body = computed(() => {
  const store = useOrder();
  return uni.$uv.deepClone(store.group);
});

function asyncChange(value){
  body.value.is_exempt = value;
  const params = {
    id: body.value.id,
    is_exempt: body.value.is_exempt
  }
  editGroup(params).then(res => {
    getGroup(body.value.id);
  })
}
function payConfirm({ value }){
  body.value.pay_expiration = value[0].id;
  const params = {
    id: body.value.id,
    pay_expiration: body.value.pay_expiration
  }
  editGroup(params).then(res => {
    getGroup(body.value.id);
  })
}
function themeConfirm({ value }){
  body.value.theme_auth = value[0].id;
  const params = {
    id: body.value.id,
    theme_auth: body.value.theme_auth
  }
  editGroup(params).then(res => {
    getGroup(body.value.id);
  })
}
function openPay(){
  payPicker.value.open();
}
function openTheme(){
  themePicker.value.open();
}
function tapExamine(){
  if(body.value.examine_status == 2) return;
  uni.navigateTo({
    url: '/pages/group/setting/formal'
  });
}
</script>

<style lang="scss" scoped>
  .list{
    margin-top: 20rpx;
    &.nomt{
      margin-top: 0;
    }
    :deep(.uv-cell__value){
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
    }
  }
  .status{
    width: 100%;
    height: 20rpx;
    background-color: #F5F5F5;
  }
  .wrap{
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>